<template>
  <div class="signal-container">
    <div :class="{'active': value >= item}" v-for="item in 5" :key="item"></div>
  </div>
</template>

<script>
export default {
  name: 'signal',
  props: {
    value: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped lang="stylus">
  .signal-container
    height 14px
    display flex
    align-items flex-end
    .active
      background #5f77fd
    div
      width 3px
      background #d3d3d3
    div:nth-child(1)
      height 20%
      margin-right 1px
    div:nth-child(2)
      height 40%
      margin-right 1px
    div:nth-child(3)
      height 60%
      margin-right 1px
    div:nth-child(4)
      height 80%
      margin-right 1px
    div:nth-child(5)
      height 100%
</style>
